<template>
	<div class="previewImage" @click="hideMe">
		<swiper class="previewSwiper" ref="mySwiper" :options="swiperOptions">
			<swiper-slide class="swiperSlide" v-for="(item,index) in previewImageUrls" :key="index">
				<img v-lazy="item" alt="">
			</swiper-slide>
		</swiper>
	</div>
</template>

<script>
	import {mapGetters} from "vuex";
	export default {
		name:"previewImage",
		computed:{
			...mapGetters(["previewImageUrls","currentPriviewImage"]),
			swiperOptions(){
				var that = this; //这个this指向的是vue
				let currentIndex=this.previewImageUrls.indexOf(this.currentPriviewImage);
				if(currentIndex==-1){
					//说明它没有找到
					currentIndex=0;
				}
				return {
				    initialSlide: currentIndex
				}
			}
		},
		methods:{
			hideMe(){
				this.hidePreviewImage();
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../assets/css/comm.scss";
	.previewImage{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0px;
		top: 0px;
		background-color: #000000;
		z-index: 9999;
		.previewSwiper{
			width: 100%;
			height: 100%;
			.swiperSlide{
				width:100%;
				height:100%;
				@include flexbox();
				align-items: center;
				img{
					width:100%;
					height: auto;
					max-height: 100%;
				}
			}
		}
	}
</style>
